
  // console.log(1);
  //5.1 获取表单数据
  const data = serialize(form,{hash:true})
  console.log(data);
  // console.log(data);

 //5.3 优化 限制必填项不能为空
 if(!data.age)return alert('年龄不能为空')
 table.addEventListener('click', async function (e) { //动态渲染进去的 无
  // console.log(e.target.classList.contains('bi-pen'));//看有没有bi-pen
  //6.1 获取编辑按钮 
  if (e.target.classList.contains('bi-pen')) {
    console.log(e.target.dataset.id);
    // console.log(e.target.dataset.id);
    //6.3上面已添加自定义属性  data-id='${item.id}
    const id = e.target.dataset.id
    //6.4 发起获取学生详情的请求
   const res = await axios({ url: '/students/' + id }) // 接口/students/:id
    console.log(res);
    // console.log(res);
 modalBox.querySelector('input[name=name').value = res.data.name //标签属性名
    
    // 6.5 获取所有带name属性的表单框 
    const nodelist = modalBox.querySelectorAll('[name]')
    // console.log(nodelist);
    //6.5.1 循环遍历表单框合集 集中赋值
    nodelist.forEach(item => {
    //6.5.3 如果是gender 做判断 
        if (item.name === 'gender') {
          //如果是1单选框则为男，0则为女 
           res.data[item.name]
             ? (modalBox.querySelector('#cb01').checked = true)
             : (modalBox.querySelector('#cb02').checked = true)
          // console.log(item);
          return
         }

    //6.5.2给每个表单框赋值
      modalBox.querySelector('input[name= gender/salary')

      item.value = res.data[item.name] 
     
    })

    // 6.6 获取城市,地区列表
    const { data: cityData } = await axios({
      url: "/api/city",
      params: { pname: res.data.province } //修改成所获取的学生信息的省份
    })
   console.log(cityData);
   // 6.7渲染城市下拉框
   const cityStr = cityData.map(item => {  
    return` <option value="${item}">--${item}--</option>`
   }).join('')
    cs.innerHTML = ` <option value="">--城市--</option>${cityStr}`
      // 给城市下拉框赋值
      cs.value=res.data.city
     

    const { data: areaData } = await axios({
      url: '/api/area',
      params:{pname:res.data.province,cname:res.data.city},
    })
    //渲染地区下拉框
    const areaStr = areaData?.map(item => {  
      return` <option value="${item}">--${item}--</option>`
    }).join('')
    as.innerHTML = ` <option value="">--地区--</option>${areaStr}` 
     // 给城市下拉框赋值
    as.value = res.data.area

    //7.1 设置modal自定义属性 把学生id给modal自定义属性
      modalBox.dataset.id = id
      modalBox.querySelector('.modal-title').innerHTML = '修改学员信息'

   // 打开model层
    modal.show()
  }
   //6.2 获取删除按钮 
  //8 删除功能
  if (e.target.classList.contains('bi-trash')) {
  // to do 
    //8.1 获取学生id
    const id = e.target.dataset.id
    //8.2 发起删除学生请求
    await axios({ url: '/students/' + id, method: 'DELETE' })
    
    //调用渲染函数重新刷新页面
    getStudentList()

    //提示用户已经删除成功了
    alert('删除成功')
  }
})
